<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/btns.css">
    <title>美丽按钮</title>
</head>
<body>
    <a href="#">冒泡按钮</a>
    <a href="#">冒泡按钮</a>  
</body>
<script>
    const btns = document.querySelectorAll('a');
    btns.forEach(btn=>{
        btn.addEventListener("click",function(e){
            let x = e.clientX - e.target.offsetLeft;
            let y = e.clientY - e.target.offsetTop;
            // console.log(x,y);
            let span = document.createElement('span');
            span.style.left = x + 'px';
            span.style.top = y + 'px';
            this.appendChild(span);
            setTimeout(()=>{
                span.remove();
            },1000)
        })
    })
</script>
</html>